<template>
  <div id="app">
    Color: 
    <div class="color-picker">
      <input 
        type="text" 
        autocomplete="off"
        v-model="color" 
        @keyup="findColors" 
      />
      <div 
        class="popup" 
        :class="list.length > 0 ? 'show' : ''" 
      >
        <div 
          class="color-item"
          v-for="color in list" 
          :key="color" 
          @click="onClick(color)"
        >
          {{color}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Axios from 'axios'
Axios.defaults.baseURL = 'http://demo-api.geekfun.website'

export default {
  data(){
    return{
      color: "",
      list: []
    }
  },
  methods: {
    findColors() {
      if(this.color.trim())
        Axios.get(
          "/vue-bs/get-colors.aspx",
          {params: {sColor: this.color}}
        )
        .then(response => this.list = response.data);
      else
        this.list = []; 
    },
    onClick(color) {
      this.color = color
      this.list = []; 
    }
  }
}
</script>
<style>
  * {
    box-sizing: border-box;
  }
  .color-picker{
    position:relative;
    display:inline-block;
  }
  .color-picker input{
    width:200px; 
    font-size: 16px;
  }
  .popup{
    position:absolute; 
    width:200px;
    cursor:pointer;
  }
  .popup.show{
    border: 1px solid #666;
  }
  div.color-item:hover {
    background-color:#ccc;
  }
  .color-item{
    padding:2px;
  }
</style>